<template>
  <div>
    <el-col :span="searchOption.length >0 ? inputHaveOptionSpan : inputNoOptionSpan" style="padding-right:10px;">
      <el-input
        :clearable="searchWay"
        :placeholder="`请输入${inputPlaceholder}搜索`"
        v-model.lazy="searchContent"
      >
        <el-select v-if="searchOption.length >0" v-model="selectType" slot="prepend" placeholder="请选择">
          <el-option v-for="item in searchOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-input>
    </el-col>
    <el-col v-if="!searchWay" :span="4">
      <el-button
        :disabled="selectType=='' && searchOption.length >0 ? true : false"
        type="primary"
        icon="el-icon-search"
        @click="onSearch(true)"
      >搜索</el-button>
      <el-button icon="el-icon-refresh" @click="onSearch(false)">重置</el-button>
    </el-col>
  </div>
</template>

<script>
  export default {
    name: 'MySearch',
    props: {
      inputPlaceholder: {
        type: String,
        default: "内容"
      },
      //true为自动搜索，false为手动搜索
      searchWay: {
        type: Boolean,
        default: false
      },
      //类型选择的数组
      searchOption: {
        type:Array,
        default: () => []
      },
      //有下拉选项时的输入框长度
      inputHaveOptionSpan:{
        type: Number,
        default: 6,
      },
      //无下拉选项时的输入框长度
      inputNoOptionSpan:{
        type: Number,
        default: 4,
      }
    },
    data(){
      return{
        selectType: "",
        searchContent: ""
      }
    },
    methods: {
      //搜索事件
      onSearch(flag) {
        if(flag){
          this.doSearch()
        }else{
          //先清空再搜索
          if(!this.searchWay){
            this.searchContent='';
            this.selectType=''
          }
          this.doSearch()
        }
      },
      doSearch(){
        if(this.searchOption.length >0){
          this.$emit("onSearch",this.searchContent,this.selectType);
        }else{
          this.$emit("onSearch",this.searchContent);
        }
      }
    },
    watch:{
      searchContent:{
        handler:function(val){
          if(this.searchWay){
            this.onSearch(true);
            if(val=="") this.selectType="";
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-select {
    min-width: 110px;
  }
</style>
